<template>
<div class="kecheng">
   <div class="kecheng1">
 <el-button type="primary" @click="isshow = true" class="btn">添加班级</el-button>
  <el-button type="danger" class="btn" @click="deletebanji">删除班级</el-button>
  <el-button type="primary"  class="btn"><a :href="hrf">导出班级</a></el-button>
<el-upload
  class="upload-demo" :headers="headers"
  :action="hre"
  :on-change="handleChange"
  :on-success="chengong"
  :file-list="exclelist">
  <el-button size="small" type="primary">批量添加班级</el-button>
  <div slot="tip" class="el-upload__tip" style="color:red;">注意：批量操作前，点击导出班级，导出模板，只能上传excel文件</div>
  <!-- <span>注意：批量操作前，点击导出班级，导出模板，只能上传excel文件</span> -->
</el-upload>

<el-dialog title="添加班级" :visible.sync="isshow">
  <el-form :model="form">
      <el-input v-model="form.className" placeholder="请输入班级名称"></el-input>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="isshow = false">取 消</el-button>
    <el-button type="primary" @click="addbanji()">确 定</el-button>
  </div>
</el-dialog>
   </div>
<!-- 列表模块 -->
   <div class="kecheng2">
         <el-table
          border
    ref="multipleTable"
    :data="banjilist"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="id"
      width="150">
      <template slot-scope="scope">{{ scope.row.cid }}</template>
    </el-table-column>
    <el-table-column
      prop="className"
      label="班级"
      width="200">
    </el-table-column>
     <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">查看详情</el-button>
      </template>
    </el-table-column>
  </el-table>
   </div>
   </div>
</template>

<script>
import {http,URL} from '../../../../../uitl/request'
import { getToken } from '@/api/login';

export default {
    created(){
        this.getbanji()
    },
   data() {
      return {
        isshow:false,
        banjilist:[],
        form:{className:''},
        delearr:[],
        user:this.$store.state.userinfo,
        headers:{ "token":getToken()},
        hre:URL+`/class/saveClassByExcel`,
        exclelist:[],
        hrf:URL+'/class/exportClass'
      }
    },
    methods:{
//获取全部班级列表
       async getbanji(){
try {
 const {data:res}=await http.post('/class/getClassList')
    if(res.data == undefined) {
              this.$message.error(res.msg)
              return
            }
    this.banjilist=res.data
    //console.log(res.data);
} catch (err) {
    Promise.reject(err)
}
        },
//添加班级
async addbanji(){
    try {
      if (this.form.className=='') {
        return this.$message.error('请填写信息')
      }
        const {data:res}=await http.post('/class/saveClass',this.form)
        //console.log(res.data);
        if(res.data == undefined) {
              this.$message.error(res.msg)
              return
            }
        this.$message({type:'success',message:res.data})
        this.isshow = false
        this.form.className=''
    this.getbanji()
    } catch (err) {
        Promise.reject(err)
    }
},
//获取要删除的数组
  handleSelectionChange(val) {
        this.delearr = val;
      },
//删除数据
async deletebanji(){
    const arr=[]
    this.delearr.map(ite=>{
        arr.push(ite.cid)
    })
try {
   const {data:res}=await http.post('/class/removeClass',arr) 
   if(res.data == undefined) {
              this.$message.error(res.msg)
              return
            }
   this.$message({type:'success',message:res.data})
   this.getbanji()
} catch (err) {
  Promise.reject(err)  
}
},
//查看详情
handleEdit(index,row){
    if(this.user.level>=3){
this.$router.push({path:'/banji',query:row})
    }
},
//文件上传成功时调用
chengong(){
  this.$message.success('上传成功')
this.getbanji()
}
    }
}
</script>

<style scoped>
.kecheng{
line-height: 30px;
}
.btn{
    float: left ;
}
</style>